<template lang="pug">
  .layout-main(
    :class="{'layout-main-fullChart':fullChart,'layout-main-fullDatatable':fullDatatable}")
    .layout-form
      .layout-form-main
        slot(name="form")
    .layout-chart
      .layout-chart-main
        slot(name="chart")
        i.layout-chart-toggle.iconfont(
          :title="fullChart|titleFilter"
          :class="fullChart|iconFilter"
          @click="layoutToggle('fullChart')")
    .layout-datatable
      .layout-datatable-main
        slot(name="datatable")
        i.layout-datatable-toggle.iconfont(
          :title="fullDatatable|titleFilter"
          :class="fullDatatable|iconFilter"
          @click="layoutToggle('fullDatatable')")
</template>

<script>

export default {
  name: 'layout',
  data () {
    return {
      fullChart: false,
      fullDatatable: false
    }
  },
  filters: {
    titleFilter: (val) => val ? '嵌入' : '弹出',
    iconFilter: (val) => val ? 'icon-embedded' : 'icon-pop-up'
  },
  methods: {
    layoutToggle (val) {
      this[val] = !this[val]
    }
  }
}
</script>

<style lang="sass" scoped>
.layout-main
  display: flex
  flex-direction: column
  flex: 4
  padding: 0 8px
  transition: all 0.3s
  .layout-chart
    display: flex
    flex: 3
    padding-top: 8px
    transition: flex 0.3s
    overflow: hidden
  .layout-datatable
    display: flex
    flex: 2
    padding-top: 8px
    transition: flex 0.3s
    overflow: hidden
  &.layout-main-fullChart
    .layout-datatable
      flex: 0
  &.layout-main-fullDatatable
    .layout-chart
      flex: 0
  .layout-form
    display: flex
    height: 50px
    padding-top: 8px
  .layout-datatable-toggle, .layout-chart-toggle
    position: absolute
    right: 10px
    color: #000
    cursou: pointer
  .layout-chart-toggle
    bottom: 10px
  .layout-datatable-toggle
    top: 10px
  .layout-form-main, .layout-chart-main, .layout-datatable-main
    position: relative
    flex: 1
    background: #fff
    overflow: hidden
  .layout-datatable-main
    width: 100%
</style>
